<template>
  <div class="products-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-left">
        <h2>商品列表</h2>
        <a-tag>共 {{ total }} 个商品</a-tag>
      </div>
      <div class="header-right">
        <a-button type="primary" @click="handleAdd">
          <template #icon><icon-plus /></template>
          添加商品
        </a-button>
      </div>
    </div>

    <!-- 搜索区域 -->
    <a-card class="search-card" :bordered="false">
      <a-form :model="searchForm" layout="inline">
        <a-form-item field="keyword" label="商品搜索">
          <a-input
            v-model="searchForm.keyword"
            placeholder="商品名称/编号"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="category" label="商品分类">
          <a-select
            v-model="searchForm.category"
            placeholder="请选择分类"
            allow-clear
          >
            <a-option
              v-for="item in categoryOptions"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="status" label="商品状态">
          <a-select
            v-model="searchForm.status"
            placeholder="请选择状态"
            allow-clear
          >
            <a-option
              v-for="item in statusOptions"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </a-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleSearch">
              <template #icon><icon-search /></template>
              搜索
            </a-button>
            <a-button @click="handleReset">
              <template #icon><icon-refresh /></template>
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 表格区域 -->
    <a-card class="table-card" :bordered="false">
      <template #title>
        <a-space>
          <a-button type="primary" status="success">
            <template #icon><icon-download /></template>
            导出数据
          </a-button>
          <a-button type="primary" status="warning">
            <template #icon><icon-upload /></template>
            批量导入
          </a-button>
          <a-button type="primary" status="danger">
            <template #icon><icon-delete /></template>
            批量删除
          </a-button>
        </a-space>
      </template>
      <a-table
        :columns="columns"
        :data="tableData"
        :pagination="pagination"
        :loading="loading"
        :row-selection="rowSelection"
        @page-change="handlePageChange"
        @page-size-change="handlePageSizeChange"
      >
        <!-- 商品信息 -->
        <template #product="{ record }">
          <div class="product-info">
            <a-image
              :src="record.image"
              :preview="false"
              width="60"
              height="60"
              fit="cover"
            />
            <div class="info-content">
              <div class="product-name">{{ record.name }}</div>
              <div class="product-code">{{ record.code }}</div>
            </div>
          </div>
        </template>

        <!-- 价格 -->
        <template #price="{ record }">
          <div class="price-info">
            <div class="sale-price">¥{{ record.salePrice }}</div>
            <div class="original-price">¥{{ record.originalPrice }}</div>
          </div>
        </template>

        <!-- 库存 -->
        <template #stock="{ record }">
          <a-statistic
            :value="record.stock"
            :value-style="getStockStyle(record.stock)"
          />
        </template>

        <!-- 状态 -->
        <template #status="{ record }">
          <a-tag :color="getStatusColor(record.status)">
            {{ record.statusText }}
          </a-tag>
        </template>

        <!-- 操作 -->
        <template #operations="{ record }">
          <a-space>
            <a-button type="text" size="small" @click="handleEdit(record)">
              编辑
            </a-button>
            <a-button
              type="text"
              size="small"
              status="warning"
              @click="handleCopy(record)"
            >
              复制
            </a-button>
            <a-button
              type="text"
              size="small"
              status="danger"
              @click="handleDelete(record)"
            >
              删除
            </a-button>
            <a-dropdown>
              <a-button type="text" size="small">
                更多
                <icon-down />
              </a-button>
              <template #content>
                <a-doption>查看详情</a-doption>
                <a-doption>上架</a-doption>
                <a-doption>下架</a-doption>
                <a-doption>分享</a-doption>
              </template>
            </a-dropdown>
          </a-space>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import {
  IconPlus,
  IconSearch,
  IconRefresh,
  IconDownload,
  IconUpload,
  IconDelete,
  IconDown,
} from "@arco-design/web-vue/es/icon";

// 搜索表单
const searchForm = reactive({
  keyword: "",
  category: "",
  status: "",
});

// 分类选项
const categoryOptions = [
  { label: "文创商品", value: "cultural" },
  { label: "特色美食", value: "food" },
  { label: "手工艺品", value: "handicraft" },
];

// 状态选项
const statusOptions = [
  { label: "上架中", value: "on" },
  { label: "已下架", value: "off" },
  { label: "售罄", value: "sold_out" },
];

// 表格配置
const columns = [
  {
    title: "商品信息",
    dataIndex: "product",
    slotName: "product",
    fixed: "left",
    width: 300,
  },
  {
    title: "价格",
    dataIndex: "price",
    slotName: "price",
    width: 120,
  },
  {
    title: "库存",
    dataIndex: "stock",
    slotName: "stock",
    width: 100,
  },
  {
    title: "销量",
    dataIndex: "sales",
    width: 100,
  },
  {
    title: "状态",
    dataIndex: "status",
    slotName: "status",
    width: 100,
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    width: 180,
  },
  {
    title: "操作",
    slotName: "operations",
    fixed: "right",
    width: 200,
  },
];

// 表格数据
const loading = ref(false);
const total = ref(100);
const tableData = ref([
  {
    id: 1,
    code: "P202403150001",
    name: "示例商品1",
    image: "/images/products/product1.jpg",
    salePrice: "299.00",
    originalPrice: "399.00",
    stock: 100,
    sales: 50,
    status: "on",
    statusText: "上架中",
    createTime: "2024-03-15 12:34:56",
  },
  // ... 更多数据
]);

// 分页配置
const pagination = reactive({
  total: 100,
  current: 1,
  pageSize: 10,
  showTotal: true,
  showJumper: true,
  showPageSize: true,
});

// 多选配置
const rowSelection = {
  type: "checkbox",
  showCheckedAll: true,
  onlyCurrent: false,
};

// 获取库存样式
const getStockStyle = (stock) => {
  if (stock <= 0) return { color: "#f53f3f" };
  if (stock <= 10) return { color: "#ff7d00" };
  return { color: "#00b42a" };
};

// 获取状态颜色
const getStatusColor = (status) => {
  const colorMap = {
    on: "green",
    off: "gray",
    sold_out: "red",
  };
  return colorMap[status] || "default";
};

// 处理搜索
const handleSearch = () => {
  // TODO: 实现搜索逻辑
  console.log("搜索条件：", searchForm);
};

// 处理重置
const handleReset = () => {
  searchForm.keyword = "";
  searchForm.category = "";
  searchForm.status = "";
};

// 处理分页变化
const handlePageChange = (current) => {
  pagination.current = current;
};

const handlePageSizeChange = (pageSize) => {
  pagination.pageSize = pageSize;
  pagination.current = 1;
};

// 处理添加
const handleAdd = () => {
  // TODO: 实现添加逻辑
};

// 处理编辑
const handleEdit = (record) => {
  // TODO: 实现编辑逻辑
  console.log("编辑商品：", record);
};

// 处理复制
const handleCopy = (record) => {
  // TODO: 实现复制逻辑
  console.log("复制商品：", record);
};

// 处理删除
const handleDelete = (record) => {
  // TODO: 实现删除逻辑
  console.log("删除商品：", record);
};
</script>

<style lang="scss" scoped>
.products-page {
  @apply space-y-6;

  .page-header {
    @apply flex items-center justify-between mb-6;

    .header-left {
      @apply flex items-center space-x-4;

      h2 {
        @apply text-xl font-medium;
      }
    }
  }

  .search-card,
  .table-card {
    @apply bg-white rounded-lg;
  }

  .product-info {
    @apply flex items-center space-x-4;

    .info-content {
      @apply flex-1 min-w-0;

      .product-name {
        @apply text-gray-900 font-medium truncate mb-1;
      }

      .product-code {
        @apply text-gray-500 text-sm;
      }
    }
  }

  .price-info {
    .sale-price {
      @apply text-red-500 font-medium;
    }

    .original-price {
      @apply text-gray-400 text-sm line-through;
    }
  }
}
</style>
